<template>
  <div id="mapContainer"></div>

  <div class="toolBar">
    <span @click="startDraw(DrawType.CIRCLE)">圆形</span>
    <span @click="startDraw(DrawType.POINT)">点</span>
    <span @click="startDraw(DrawType.RECTANGLE)">矩形</span>
    <span @click="startDraw(DrawType.POLYGON)">多边形</span>
    <span @click="startDraw(DrawType.POLYLINE)">线</span>
  </div>
</template>

<script setup lang="ts">
import { markRaw, onMounted, reactive } from "vue";
import * as Cesium from "cesium";
import { useCesium } from "../composables";
import { DrawType } from "../composables/ENUM";
import { DrawTool } from "../tool/DrawTool";

const datas = reactive<{ viewer: Cesium.Viewer | null }>({
  viewer: null,
});

const { initViewer } = useCesium("mapContainer");

let drawTool: DrawTool;

onMounted(() => {
  const viewer = initViewer();

  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(116.397477, 39.908692, 18000),
    duration: 0,
  });

  datas.viewer = markRaw(viewer);

  const ds = new Cesium.CustomDataSource();
  viewer.dataSources.add(ds);
  drawTool = new DrawTool(viewer, ds);
});

const startDraw = (type: DrawType) => {
  drawTool.startDraw(type);
};
</script>

<style scoped lang="less">
#mapContainer {
  height: 100vh;
}
.toolBar {
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 9999;
  width: 450px;
  height: 42px;
  display: flex;
  align-items: center;
  background-color: aliceblue;
  border-radius: 15px;
  box-sizing: border-box;
  padding: 0 20px;
  span {
    cursor: pointer;
    margin: 0 5px;
  }
}
</style>
